<template>
  <div class="container">
    <div class="button-wrapper">
      <svg width="240" height="50">
        <rect class="rectangle" width="240" height="50"></rect>
      </svg>
      <div class="btn" @click="$router.push('/index')">ttzxh</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
const router = useRouter()
</script>

<style scoped lang="scss">
  .button-wrapper{
    position: relative;
    width: 240px;
    height: 50px;
    text-align: center;

  }
  .rectangle{
    stroke-width: 8px;
    stroke:#ff6348;
    fill: transparent;
    stroke-dasharray: 100 500;
    stroke-dashoffset: -364;

  }
  @font-face {
  font-family: "advice";
  src: url("../assets/font/advice (2).woff");
  src: url("../assets/font/advice (2).woff") format("woff");
}
@media screen and (max-width: 765px) {
  .btn{
    font-family: advice;
    color: #f5f5f5;
    font-size: 20px;
    letter-spacing: 6px;
    position: relative;
    top: -42px;
    transition: all 0.2s;
    &:hover{
      color: red;
      transform: scale(1.3);
    }
  }
}
@media screen and (min-width: 766px) {
  .btn{
    font-family: advice;
    color: #000;
    font-size: 20px;
    letter-spacing: 6px;
    position: relative;
    top: -42px;
    transition: all 0.2s;
    &:hover{
      color: red;
      transform: scale(1.3);
    }
  }
}
  
  
  @keyframes extend {
    to{
      stroke-dasharray: 600;
      stroke-dashoffset: 0;
      stroke-width: 2;

    }
  }
  .rectangle{
    animation:3s extend linear infinite Alternate
  }
</style>